<template>
	<!--邀请弹出框 游客确认--> 
	<div class="live-end-box">
		<div class="end-info">
			<div class="end-logo-box"><img src="../../../src/assets/images/zxxyk/zxxyk_logo.svg"></div>
			<h2 class="end-title">{{roomInfo.title}}</h2>
			<p class="end-cover-box"><img :src="roomInfo.imagUrl+'?x-oss-process=image/resize,m_fixed,h_424,w_750'" alt=""></p>
			<div class="end-bottom">
				<p>直播已结束</p>
				<div class="end-time-box">
					<div>
						<p>{{roomInfo.closeTime!=null?roomInfo.closeTime.substring(5,16):'00-00 00:00'}}</p>
						<p>结束时间</p>
					</div>
					<div>
						<p>{{diffTime}}</p>
						<p>直播时长</p>
					</div>
				</div>
			</div>
		</div>
		<div class="end-btn" @click="backHome">返回首页</div>
	</div>
</template>

<script>
import fun from "@/util/function";
	export default {
		props:{
			roomInfo:Object
		
		},
		data() {
			return {
				diffTime:''
				
			}
		},
		created(){
			this.diffTime = fun.getDateDiff(this.roomInfo.startTime,this.roomInfo.closeTime == null ? this.roomInfo.startTime:this.roomInfo.closeTime);
		},
		methods: {
			backHome(){
				this.$router.replace({
						path: "/" + this.$channel + "/home"
					});
			}
	
		},
		watch: {}

	}
</script>

<style scoped="scoped">
	.live-end-box {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: url('../../assets/images/zxxyk/end_bg.jpg') no-repeat;
		background-size: 100% 100%;
	}
	
	.end-info {
		width: calc(100vw - 76px);
		height: auto;
		background:#FFFFFF;
		border-radius: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}
	.end-logo-box{
		height: 185px;
		width:185px;
		padding: 12px;
		position: absolute;
		top: -52px;
		background: white;
		border-radius: 50%;	
	}
	.end-logo-box img{
		height: 100%;
		width: 100%;
	}
	.end-title{	
		width: 86%;
		text-align: center;
		padding-top: 139px;	
		margin-bottom: 34px;
		font-size: 36px;
		font-weight: 500;
		color: #333333;
		line-height: 50px;
	}
	.end-cover-box{
		width: calc(100% - 224px);
		height: 255px;
		margin-bottom: 32px;
	}
	.end-cover-box img{
		height: 100%;
		width: 100%;
	}
	.end-bottom{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 44px;
		padding-bottom: 55px;
		border-top: 3px dashed #B5B5B5;
	}
	.end-bottom > p{
		margin-bottom: 30px;
		font-size: 26px;
		color: #4A4A4A;
	}
	.end-time-box{
		width: calc(100% - 44px);
		padding-top: 50px;
		padding-bottom: 56px;	
		display: flex;
		justify-content: space-around;
		background: #D7000F;
		box-shadow: 0px 11px 15px 0px rgba(227, 76, 87, 0.5);
		opacity: 0.7;
		border-radius: 6px;
	}
	.end-time-box div{
        width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.end-time-box div:first-child{
		border-right:  1px solid #cac4c4ab;

	}
	.end-time-box div p{	
		font-size: 24px;
		font-weight: 500;
		color: #FFB0B6;
	}
	.end-time-box div p:first-child{      
		margin-bottom: 20px;	
		font-size: 32px;
		font-weight: 500;
		color: #FFFFFF;
		
	}
	.end-btn{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 5%;
		margin: auto;
		width: calc(100% - 150px);
		line-height: normal;
		padding: 22px 0;
		text-align: center;
		background: #FE4C52;
		border-radius: 45px 45px 45px 45px;
		font-size: 36px;
		font-weight: 500;
		color: #FFFFFF;
	}
	
</style>